<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />
		<!-- 本页css -->
		<link rel="stylesheet" href="css/editPassword.css" />
		<!-- 本页css  主要-->
		<link rel="stylesheet" href="css/basicInfo.css" />



	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="orderList-wrapper table-wrapper section" v-cloak>
			
			<div class="orderList-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">修改密码</span>
				</div>

				<div v-if="isshowNotice()" class="notice-wrapper fboxRow">
					<i class="icon el-icon-warning"></i>
					<p>您的个人信息尚未完善，请完善个人信息</p>
				</div>

				<div class="form-wrapper" style="position: relative;">
					<div class="from-title-wrapper">
						<span class="from-title">
							基本信息
						</span>
						<div class="time-wrapper">
							<div class="user-logo"></div>
							<span>注册时间: {{ruleForm.registerTime}}</span>
						</div>
					</div>

					<div class="form-wrapper-content">
						<div class="elform-wrapper">
							<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
								<el-form-item label="用户ID:" prop="userId">
									<el-input :disabled="true" style="width: 320px;" v-model="ruleForm.userId" autocomplete="off"></el-input>
								</el-form-item>

								<el-form-item label="用户名称:" :prop="showEdit('editUserName','name')">
									<el-input :clearable="editUserName" :disabled="!editUserName" style="width: 320px;" v-model="ruleForm.name"></el-input>
									<span v-if="!editUserName" @click="editUserName = true" class="opeartion-button">修改用户名称</span>
									<span v-else @click="cancelEdit('editUserName','name')" class="opeartion-button">取消修改</span>
								</el-form-item>


								<el-form-item :prop="showEdit('editPhone','phoneNum')" label="电话号码:" >
									<el-input @input="editPhone = true" :disabled="initruleForm.phoneNum === undefined ? false : true" style="width: 320px;" v-model="ruleForm.phoneNum"></el-input>
									<span v-if="initruleForm.phoneNum === undefined ? false : true" @click="handleclickPhoneNum" class="opeartion-button">修改电话号码</span>
								</el-form-item>
								
								
								<el-form-item label="邮箱:"  :prop="showEdit('editEmail','email')" >
									<el-input  @input="editEmail = true" :disabled="initruleForm.email === undefined ? false : true" style="width: 320px;" v-model="ruleForm.email"></el-input>
									<span v-if="initruleForm.email === undefined ? false : true" @click="handleclickEditEmail" class="opeartion-button">修改默认邮箱</span>
								</el-form-item>
								
								<el-form-item   label="QQ号码:" :prop="showEdit('editqq','qq')">
									<el-input maxLength="20" :clearable="editqq" :disabled="!editqq" style="width: 320px;" v-model.number="ruleForm.qq"></el-input>
									<span v-if="!editqq  && initruleForm.phoneNum !== undefined" @click="editqq = true" class="opeartion-button">修改QQ号码</span>
									<span v-if="editqq  && initruleForm.phoneNum !== undefined" @click="cancelEdit('editqq','qq')" class="opeartion-button">取消修改</span>
								</el-form-item>
								
								
								<el-form-item label="地域:" :prop="showEdit('editArea','area')">
									<div class="fboxRow" style="width: 320px;">
										<el-select v-if="ruleForm.courntryid === undefined || ruleForm.courntryid === undefined || editArea === true" class="mr-10" @change="courntrySelectChange" :disabled="!editArea" style="width: 155px;" v-model="ruleForm.courntryid">
										  <el-option v-for="(item,index) in ruleForm.courntryGroup" :key="item.id" :label="item.label" :value="item.id"></el-option>
										</el-select>
										<el-select  :disabled="!editArea" style="width: 155px;"  v-model="ruleForm.areaid">
										  <el-option v-for="(item,index) in ruleForm.areaGroup" :key="item.id" :label="item.label" :value="item.id"></el-option>
										</el-select>
									</div>

									<span v-if="!editArea" @click="editArea = true" class="opeartion-button">修改地域</span>
									<span v-else @click="cancelEdit('editArea','area')" class="opeartion-button">取消修改</span>
								</el-form-item>

								<el-form-item label="实名认证:">
									<div   style="width: 320px;display: flex;align-items: center;" v-html="handleRenzhengTxt()"></div>
									<span v-if="ruleForm.status === 'unverified'" @click="handleclickGotoRenzheng" class="opeartion-button">去认证</span>
								</el-form-item>


								<el-form-item>
									<div :class="{'submit':computedFormOpeartion === true}"  @click="submitForm('ruleForm')" class="yzButton "> 保存</div>
									<div @click="resetForm('ruleForm')" class="yzButton  noColorTolight   ml-10">重置</div>
								</el-form-item>
							</el-form>
							
							<el-dialog @closed="closedEditDialog('editPhoneForm')"  style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="editPhoneNumDialogVisble">
								<div slot="title" class="dialog-title">
									修改手机号码
								</div>
								<div class="dialog-content verifyIdentity">
										<el-form :model="editPhoneForm" :rules="editPhoneRules" ref="editPhoneForm" label-width="100px" class="demo-ruleForm">
											<el-form-item label="原手机号:">
												<el-input :disabled="true" style="width: 320px;" v-model="initruleForm.phoneNum"></el-input>
											</el-form-item>
											<el-form-item label="新手机号:" class="phoneNumber" prop="newphoneNum">
											<i class="linear"></i>
											  <el-input maxLength ="20" style="width: 320px;" type="text" class="card-box-input" placeholder="请输入新手机号" v-model.number="editPhoneForm.newphoneNum" clearable>
											   <el-select v-model="editPhoneForm.areaActiveId" class="inputText fboxCenter" slot="prefix">
											    <el-option v-for="(item,index) in editPhoneForm.areaGroup" :key="item.id" :label="item.label" :value="item.id"></el-option>
											  </el-select> </el-input>
											</el-form-item>
											<el-form-item prop="phoneVerificationCode" label="手机验证码:">
												<el-input maxLength="6" style="width: 192px;" v-model="editPhoneForm.phoneVerificationCode"></el-input>
												<div :class="{'noClick': !phoneCanSendverificationCode}"  @click="handleClickSendverificationCode"  class="yzButton verificationCode ml-10">
													{{handleVerificationCodeText()}}
												</div>
											</el-form-item>
											
											
											
										</el-form>
										
									<div class="dialog-button-wrapper fboxRow">
										<div  @click="confirmEditPhoneNum('editPhoneForm')" class="yzButton  confirm">确认</div>
										<div @click="editPhoneNumDialogVisble = false"  class="yzButton cancelButton">取消</div>
									</div>
							
									
								</div>
							</el-dialog>
							
							
							<el-dialog @closed="closedEditDialog('editEmailForm')"  style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="editEmailDialogVisble">
								<div slot="title" class="dialog-title">
									修改邮箱
								</div>
								<div class="dialog-content verifyIdentity">
										<el-form :model="editEmailForm" :rules="editEmailRules" ref="editEmailForm" label-width="120px" class="demo-ruleForm">
											<el-form-item label="原邮箱地址：">
												<el-input :disabled="true" style="width: 320px;" v-model="initruleForm.email"></el-input>
											</el-form-item>
											<el-form-item label="新邮箱地址：" prop="newEmail" >
												<el-input maxLength="50"  style="width: 320px;" v-model="editEmailForm.newEmail"></el-input>
											</el-form-item>
											<el-form-item prop="verificationCode" label="邮箱验证码：">
												<el-input maxLength="6" style="width: 192px;" v-model="editEmailForm.verificationCode"></el-input>
												<div :class="{'noClick': !emailCanSendverificationCode}"  @click="handleClickSendverificationCodeEmail"  class="yzButton verificationCode ml-10">
													{{handleVerificationCodeTextEmail()}}
												</div>
											</el-form-item>

											
											
											
										</el-form>
										
									<div class="dialog-button-wrapper fboxRow">
										<div  @click="confirmEditEmailNum('editEmailForm')" class="yzButton  confirm">确认</div>
										<div @click="editEmailDialogVisble = false"  class="yzButton cancelButton">取消</div>
									</div>
							
									
								</div>
							</el-dialog>


						</div>
					</div>
				</div>
			</div>
		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderList-wrapper',
				
				
				
				data: function() {
					let that = this
					
					// 校验是否是相同手机号
					var validatephoneEqual = function(rule, value, callback)  {
						if(value === that.initruleForm.phoneNum) {
							callback(new Error('新手机号不能和之前的号码一致'));
						}else {
							callback()
						}
					}
					
					// 校验是否是相同邮箱
					var validateEmailEqual = function(rule, value, callback)  {
						if(value === that.initruleForm.email) {
							callback(new Error('新邮箱地址不能和原邮箱地址一致'));
						}else {
							callback()
						}
					}
					
					
					
					// 校验修改手机验证码
					var validateEidtphoneCode = function(rule, value, callback)  {
						
						if(that.phoneCanSendverificationCode === true) {
							callback(new Error('请点击发送手机验证码！'));
						}
						
						if(value !== that.phonerightVerificationCode) {
							callback(new Error('验证码错误！'));
						}
						else {
							callback()
						}
					}
					
					
					//  校验修改邮箱验证码
					var validateEidtEmailCode = function(rule, value, callback)  {
						
						if(that.emailCanSendverificationCode === true) {
							callback(new Error('请点击发送邮箱验证码！'));
						}
						
						if(value !== that.emailrightVerificationCode) {
							callback(new Error('验证码错误！'));
						}
						else {
							callback()
						}
					}
					
					
					
					
					

					return {
						
						
						phoneCanSendverificationCode: true, // 修改手机号  是否可以发送验证码
						phoneWaitVerificationCodeNum: 60, // 修改手机号等待验证码倒计时
						phoneWaitVerificationCodeTimer: null, // 修改手机号等待验证码 的计时器
						phonerightVerificationCode: undefined, //  修改手机 正确的验证码

							
						emailCanSendverificationCode: true, // 修改邮箱  是否可以发送验证码
						emailWaitVerificationCodeNum: 60, // 修改邮箱等待验证码倒计时
						emailWaitVerificationCodeTimer: null, // 修改邮箱等待验证码 的计时器
						emailrightVerificationCode: undefined, //  修改邮箱 正确的验证码
							

						editUserName: false, //是否用户名称可编辑  默认为false
						editqq:false, //是否QQ可编辑  默认为false
						editPhone:false, // 电话是否被编辑过
						editEmail:false, // 邮箱是否被编辑过
						editArea:false, // 是否地域可编辑  默认为false
						editPhoneNumDialogVisble: false, // 编辑电话  dailog
						editEmailDialogVisble:  false , // 编辑邮箱  dialog
						ruleForm: { // 表单
							registerTime:'2020-10-1',
							status: 'verified' , //  认证状态  1. unverified 未认证   2.verified  已认证  3. check
							userId: 'TF123456',
							name: '测试用户名称', // 用户名称  
							phoneNum:  '18996482973', //'18996482973'
							email: '1025535910@qq.com',  //'1025535910@qq.com',
							qq: '1025535910',
							courntryid: 1,
							courntryGroup: [{
								id:1,
								label: '中国'
							},{
								id:2,
								label: '木叶村'
							},{
								id:3,
								label: '火之国'
							}],
							areaid: 3,  // 区域id
							areaGroup: [{
								id:1,
								label: '北京市'
							},{
								id:2,
								label: '天津市'
							},{
								id:3,
								label: '重庆市'
							}
								
							]
						},

						initruleForm: {  // 原始表单

						},
						
						editPhoneForm: {  // 修改手机表单
							newphoneNum:undefined, // 新手机号
							areaGroup:[{  // 手机区号数组
								id:1,
								label: '+86'
							},{
								id:2,
								label: '+126'
							},{
								id:3,
								label: '+16'
							},{
								id:4,
								label: '+11'
							}],
							areaActiveId:undefined, // 选中手机区号，
							phoneVerificationCode: undefined, // 手机输入的验证码
						},
						
						editEmailForm: {  // 修改邮箱表单
							newEmail:undefined, // 新邮箱
							verificationCode: undefined, // 邮箱输入的验证码
						},
					
						editPhoneRules: {
							newphoneNum:[{
								required: true,
								message: '请输入新手机号',
								trigger: 'blur'
							},{
									validator: validatephone,
									trigger: 'blur'
								},{
									validator: validatephoneEqual,
									trigger: 'blur'
								}],
							phoneVerificationCode:[{
								required: true,
								message: '请输入获取的验证码',
								trigger: 'blur'
							},{
								validator: validateEidtphoneCode,
								trigger: 'blur'
							}]
						},
						editEmailRules: {
							newEmail:[{
								required: true,
								message: '请输入新邮箱地址',
								trigger: 'blur'
							},{
									validator: validateEmail,
									trigger: 'blur'
								},{
									validator: validateEmailEqual,
									trigger: 'blur'
								}],
							verificationCode:[{
								required: true,
								message: '请输入获取的验证码',
								trigger: 'blur'
							},{
								validator: validateEidtEmailCode,
								trigger: 'blur'
							}]
						},
						
						
						rules: {
							initname: [{
								required: false,
								message: '用户名不符合规范',
								trigger: 'blur'
							}],
							name: [{
								required: true,
								message: '请输入用户名',
								trigger: 'blur',
							}],
							phoneNum:[{
								required: true,
								message: '请输入电话号码',
								trigger: 'blur',
							},{
									validator: validatephone,
									trigger: 'blur'
								}],
							email:[{
								required: true,
								message: '请输入邮箱号',
								trigger: 'blur',
							},{
									validator: validateEmail,
									trigger: 'blur'
								}],
							qq:[{
								required: true,
								message: '请输入QQ号码',
								trigger: 'blur',
							}],
						},
						passwordStrongGroup: [{ // 密码强度
							id: 1
						}, {
							id: 2
						}, {
							id: 3
						}],
						showpasswordStrong: false, // 是否显示密码强度条 默认不显示
						passwordStrongIndex: undefined, //密码强度级别   0 最低级  1 中间级  2 最高级    
					}
				},
				
				computed:{
					// 计算表单是否能够操作
						computedFormOpeartion: function () {
							if(this.editUserName === true || this.editArea === true || this.editqq === true || this.editEmail === true || this.editPhone === true) {
								return true
							}else {
								return false
							}
						}
						
				},
				methods: {
					// 点击跳转去认证
					handleclickGotoRenzheng: _throttle(function(){
						console.log('准备跳转到认证页面')
					}),
					
					// 处理认证文字
					handleRenzhengTxt: function() {
						let modulecontent
						switch (this.ruleForm.status){
							
							case 'unverified':
								modulecontent = '<span style="color:#333333">认证后可领取优惠券</span>'     
								break;
							case 'verified':
								modulecontent = '<span style="color:#3FBF70">以认证</span>'     
								break;
							case 'check':
								modulecontent = '<span style="color:#FF9416">正在审核</span>'     
								break;
							default:
								break;
						}
						return modulecontent
					},
					
					
					// 改变国家的选择
					courntrySelectChange: function(e) {
						// 模拟市 数据
						if(e === 1) {
							this.ruleForm.areaGroup = [{
								id:1,
								label: '北京市'
							},{
								id:2,
								label: '天津市'
							},{
								id:3,
								label: '重庆市'
							}]
							
						}
						else if(e === 2) {
							this.ruleForm.areaGroup = [{
								id:1,
								label: '木叶村-A市'
							},{
								id:2,
								label: '木叶村-B市'
							},{
								id:3,
								label: '木叶村-C市'
							}]
						}
						
						else if(e === 3) {
							this.ruleForm.areaGroup = [{
								id:1,
								label: '火之国-A市'
							},{
								id:2,
								label: '火之国-B市'
							},{
								id:3,
								label: '火之国-C市'
							}]
						}
						
						
						this.ruleForm.areaid = this.ruleForm.areaGroup[0].id
					},
					
					// 确认修改手机号的方法
					confirmEditPhoneNum: function(formName) {
						console.log('确认修改手机号的方法')
						let that = this
						this.$refs['editPhoneForm'].validate(function(valid) {
							if (valid) {
								that.ruleForm.phoneNum = that.editPhoneForm.newphoneNum
								that.editPhoneNumDialogVisble =  false
								that.phonerightVerificationCode = undefined
								that.editPhone =  true
								that.$message.success('手机号码更改成功！')
							} else {
								return false;
							}
						});
						
					},
					
					// 确认修改邮箱的方法
					confirmEditEmailNum: function(formName) {
						console.log('确认修改邮箱的方法')
						let that = this
						this.$refs['editEmailForm'].validate(function(valid) {
							if (valid) {
								that.ruleForm.email = that.editEmailForm.newEmail
								that.editEmailDialogVisble =  false
								that.editEmail =  true
								that.emailrightVerificationCode = undefined
								that.$message.success('修改邮箱成功！')
							} else {
								return false;
							}
						});
						
					},
					
					
					// 取消修改的方法
					cancelEdit: function(key, val) {
						console.log(this.initruleForm)
						this[key] = false
						
						if(val === 'area') {
							this.ruleForm.courntryid = this.initruleForm.courntryid
							this.ruleForm.areaGroup = this.initruleForm.areaGroup
							this.ruleForm.areaid = this.initruleForm.areaid
							return 
						}
						
						this.$refs['ruleForm'].clearValidate(val);
						this.ruleForm[val] = this.initruleForm[val]

					},


					// 是否显示个人信息
					isshowNotice: function() {
						// 保险起见 拿初始值比较
						let showNotice = false
						// 不是已经认证 都属于个人信息不完全
						 if(this.initruleForm.status !== 'verified') {
							 return true
						 }
						
						 for(let key  in this.ruleForm){
							 if(this.initruleForm[key] === undefined) {
								 showNotice = true
							 }
							
						  }
						
						return showNotice
					},
					// 处理是否开启校验规则
					showEdit: function(key, val) {
						if(val  === 'phoneNum' && this.initruleForm.phoneNum === undefined) {
							return val
						}
						if(val  === 'email' && this.initruleForm.email === undefined) {
							return val
						}
						
						let bool = this[key]
						return bool ? val : 'initname'

					},
					// 点击修改手机号
					handleclickPhoneNum: function() {
						if( this.editPhoneForm.areaGroup.length &&   this.editPhoneForm.areaGroup.length > 0 ) {
							this.editPhoneForm.areaActiveId = this.editPhoneForm.areaGroup[0].id
						}
						
						this.editPhoneNumDialogVisble = true
					},
					
					// 点击修改邮箱
					handleclickEditEmail: function() {
						this.editEmailDialogVisble = true
					},
					
					
					// 处理发送验证码的文案
					handleVerificationCodeText:function() {
					    if(this.phoneCanSendverificationCode === true) {
					      return '发送验证码'
					    }else  {
						  
						  return '已发送(' + this.phoneWaitVerificationCodeNum + 's)'
					    }
					},
					// 处理邮箱发送验证码的文案
					handleVerificationCodeTextEmail:function() {
					    if(this.phoneCanSendverificationCode === true) {
					      return '发送验证码'
					    }else  {
						  
						  return '已发送(' + this.emailWaitVerificationCodeNum + 's)'
					    }
					},
					
					// 关闭修改的dialog
					closedEditDialog: function(formName) {
						this.$refs[formName].resetFields()
						if(formName === 'editPhoneForm') {
							this[formName].areaActiveId = this.editPhoneForm.areaGroup[0].id
						}
					},
					
					// 发送验证码
					handleClickSendverificationCode: _throttle(function(key) {
					    if(this.phoneCanSendverificationCode ===  false) {
					      return
					    }
					    this.phoneCanSendverificationCode = false
						// 模拟后台获取手机验证码
						this.phonerightVerificationCode = '12345'
						let that = this
					    this.phoneWaitVerificationCodeTimer =  setInterval( function() {
					        that.phoneWaitVerificationCodeNum--
					        if( that.phoneWaitVerificationCodeNum === 0 || that.phoneWaitVerificationCodeNum < 0 ) {
								// 初始化 修改手机的验证码
							   that.phonerightVerificationCode = undefined
					           clearTimeout(that.phoneWaitVerificationCodeTimer)
					           that.phoneCanSendverificationCode = true
					           that.phoneWaitVerificationCodeNum = 60

					        }
					    },1000)
					
					}),
					
					// 发送邮箱验证码
					handleClickSendverificationCodeEmail: _throttle(function(key) {
					    if(this.emailCanSendverificationCode ===  false) {
					      return
					    }
					    this.emailCanSendverificationCode = false
						// 模拟后台获取手机验证码
						this.emailrightVerificationCode = '123'
						let that = this
					    this.emailWaitVerificationCodeTimer =  setInterval( function() {
					        that.emailWaitVerificationCodeNum--
					        if( that.emailWaitVerificationCodeNum === 0 || that.emailWaitVerificationCodeNum < 0 ) {
								// 初始化 修改手机的验证码
							   that.emailrightVerificationCode = undefined
					           clearTimeout(that.emailWaitVerificationCodeTimer)
					           that.emailCanSendverificationCode = true
					           that.emailWaitVerificationCodeNum = 60
					
					        }
					    },1000)
					
					}),
					





					// 提交表单
					submitForm: _throttle(function(formName) {
						// 表单没有改变
						if(this.computedFormOpeartion  === false) {
							return
						}
						
						let that = this
						this.$refs[formName].validate(function(valid) {
							if (valid) {
								// 更新原始值
								that.initruleForm = deepCopy(that.ruleForm)
								
								that.editUserName = false 
								that.editqq = false 
								that.editEmail = false 
								that.editPhone = false
								that.editArea =  false
								
								that.$message.success('修改基本信息成功')
								
								
								console.log(that.ruleForm)
							} else {
								return false;
							}
						});
					}),
					// 重置表单
					resetForm: _throttle(function(formName) {
						
						this.editUserName = false
						this.editqq = false
						this.editArea = false
						this.editEmail = false
						this.editPhone = false
						this.ruleForm = this.initruleForm
						
						
						this.$refs[formName].resetFields()
						// 重置时  原始值 =  表单初始值
						this.initruleForm = deepCopy(this.ruleForm) 
						
					}),
					// 监听新密码输入值改变事件
					changeNewPassword: function(e) {

						if (!this.showpasswordStrong) {
							this.showpasswordStrong = true
						} else {
							if (e.length < 8) {
								this.passwordStrongIndex = undefined
							}
							if (e.length > 8) {
								this.passwordStrongIndex = 0
							}
							if (e.length > 11) {
								this.passwordStrongIndex = 1
							}

							if (e.length > 13) {
								this.passwordStrongIndex = 2
							}
						}

					}
				},
				mounted: function() {
					this.initruleForm = deepCopy(this.ruleForm)
					console.log(this.initruleForm)
				}
			})
		</script>
	</body>
</html>
